import {
  NDrawerContent,
  NDrawer,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NSpace,
} from "naive-ui";
import { Ref } from "vue";
import { userEditor } from "@/hooks/useGlobal";
export default defineComponent({
  name: "EditUser",
  setup() {
    let userFormRef: Ref = ref(null);
    let userForm = reactive({
      userName: "",
      userPwd: "",
      truePwd: "",
      decs: "",
    });
    let rules = {
      userName: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入账号",
      },
      userPwd: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入密码",
      },
      truePwd: {
        required: true,
        trigger: ["blur", "input"],
        message: "请再次输入密码",
      },
    };
    let isLoading = ref(false);
    const handleSubmit = () => {
      userFormRef.value
        ?.validate((errors: any) => {
          if (!errors) {
            isLoading.value = true;
          }
        })
        .catch((err: any) => {
          isLoading.value = false;
          console.log(err);
        });
    };
    return () => (
      <NDrawer
        v-model:show={userEditor.isEditUserShow.value}
        onUpdateShow={() => userEditor.toggleEditUserShow()}
        width={520}
      >
        <NDrawerContent
          title={userEditor.isEditUser.value ? "编辑账号" : "新增账号"}
          closable
        >
          {{
            default: () => {
              return (
                <NForm
                  ref={userFormRef}
                  model={userForm}
                  rules={rules}
                  labelPlacement="left"
                  labelWidth={80}
                >
                  <NFormItem label="账号" path="userName">
                    <NInput
                      placeholder="请输入账号"
                      size="large"
                      v-model:value={userForm.userName}
                    ></NInput>
                  </NFormItem>
                  <NFormItem label="密码" path="userPwd">
                    <NInput
                      placeholder="请输入密码"
                      size="large"
                      v-model:value={userForm.userPwd}
                    ></NInput>
                  </NFormItem>
                  <NFormItem label="确认密码" path="truePwd">
                    <NInput
                      placeholder="请再次输入密码"
                      size="large"
                      v-model:value={userForm.truePwd}
                    ></NInput>
                  </NFormItem>
                  <NFormItem label="备注" path="decs">
                    <NInput
                      type="textarea"
                      maxlength={200}
                      showCount
                      placeholder="请输入备注"
                      size="large"
                      v-model:value={userForm.decs}
                    ></NInput>
                  </NFormItem>
                </NForm>
              );
            },
            footer: () => {
              return (
                <NSpace>
                  <NButton
                    onClick={() => {
                      userEditor.toggleEditUserShow();
                    }}
                  >
                    取消
                  </NButton>
                  <NButton
                    onClick={() => {
                      handleSubmit();
                    }}
                    type="primary"
                    loading={isLoading.value}
                  >
                    提交
                  </NButton>
                </NSpace>
              );
            },
          }}
        </NDrawerContent>
      </NDrawer>
    );
  },
});
